<template>
  <div class="checkout-container">
    <!-- 顶部进度条 -->
    <div class="progress-bar">
      <div class="jd-logo">
        <img src="@/assets/images/one.jpg" alt="logo">
        <span>结算页</span>
      </div>
      <el-steps :active="currentStep" finish-status="success" class="steps">
        <el-step title="1.填写订单信息"></el-step>
        <el-step title="2.确认订单信息"></el-step>
        <el-step title="3.提交订单成功"></el-step>
      </el-steps>
    </div>

    <!-- 温馨提示 -->
    <div class="notice-bar">
      <i class="el-icon-warning-outline"></i>
      <span>温馨提示：订单中存在不支持7天无理由退货的商品，请确认相关商品信息。</span>
      <i class="el-icon-close" style="cursor: pointer"></i>
    </div>

    <!-- 主要内容区 -->
    <div class="checkout-main">
      <!-- 收货地址 -->
      <div class="section-card address-section">
        <h3>收货人信息</h3>
        <div class="address-list">
          <div v-for="(address, index) in addresses" 
               :key="index"
               :class="['address-item', {'address-selected': address.isDefault}]"
               @click="selectAddress(index)">
            <div class="address-info">
              <div class="address-contact">
                <span class="name">{{address.name}}</span>
                <span class="phone">{{address.phone}}</span>
                <el-tag size="mini" type="success" v-if="address.isDefault">默认</el-tag>
              </div>
              <div class="address-detail">{{address.province}} {{address.address}}</div>
            </div>
          </div>
          <div class="address-item add-address" @click="showAddressDialog">
            <i class="el-icon-plus"></i>
            <span>新增收货地址</span>
          </div>
        </div>
      </div>

      <!-- 优惠券选择 -->
      <div class="section-card coupon-section">
        <h3>优惠券</h3>
        <div class="coupon-list">
          <div v-for="coupon in availableCoupons" 
               :key="coupon.id" 
               class="coupon-item"
               :class="{ 'selected': selectedCoupon === coupon.id }"
               @click="selectCoupon(coupon)">
            <div class="coupon-info">
              <div class="coupon-amount">
                <span class="currency">¥</span>
                <span class="number">{{ coupon.amount }}</span>
              </div>
              <div class="coupon-detail">
                <div class="coupon-name">{{ coupon.name }}</div>
                <div class="coupon-condition">满{{ coupon.minAmount }}可用</div>
                <div class="coupon-time">
                  <i class="el-icon-time"></i>
                  <span>有效期至：{{ coupon.expireTime }}</span>
                </div>
              </div>
            </div>
            <div class="coupon-status">
              <el-radio v-model="selectedCoupon" :label="coupon.id"></el-radio>
            </div>
          </div>
          <div v-if="availableCoupons.length === 0" class="no-coupon">
            暂无可用优惠券
          </div>
        </div>
      </div>

      <!-- 送货清单 -->
      <div class="section-card delivery-section">
        <div class="section-header">
          <h3>送货清单</h3>
          <div class="delivery-info">
            <span>配送方式：</span>
            <el-radio-group v-model="deliveryType">
              <el-radio label="express">快递运输</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="shop-info">
          <img src="@/assets/images/one.jpg" class="shop-icon">
          <span class="shop-name">BLUE HUA旗舰店</span>
        </div>
        <div class="item-list">
          <div v-for="(item, index) in orderItems" :key="index" class="order-item">
            <img :src="item.image" :alt="item.name" class="item-image">
            <div class="item-info">
              <div class="item-name">{{item.name}}</div>
              <div class="item-spec">{{item.spec}}</div>
              <div class="no-return" v-if="item.noReturn">
                <i class="el-icon-warning-outline"></i>
                不支持7天无理由退货
              </div>
            </div>
            <div class="item-price">¥{{item.price.toFixed(2)}}</div>
            <div class="item-quantity">x{{item.quantity}}</div>
          </div>
        </div>
        <div class="delivery-time">
          <span>配送时间：</span>
          <el-radio-group v-model="deliveryTime">
            <el-radio label="anytime">工作日、双休日与节假日均可送货</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 发票信息 -->
      <div class="section-card invoice-section">
        <h3>发票信息</h3>
        <div class="invoice-type">
          <span>发票类型：</span>
          <el-radio-group v-model="invoiceForm.type">
            <el-radio label="electronic">电子发票</el-radio>
            <el-radio label="paper">普通发票</el-radio>
          </el-radio-group>
          <el-button type="text" class="invoice-detail">修改发票信息<i class="el-icon-arrow-right"></i></el-button>
        </div>
      </div>
    </div>

    <!-- 订单金额 -->
    <div class="checkout-footer">
      <div class="price-detail">
        <div class="price-item">
          <span>商品总额：</span>
          <span class="amount">¥{{totalAmount.toFixed(2)}}</span>
        </div>
        <div class="price-item">
          <span>运费：</span>
          <span class="amount">¥{{shipping.toFixed(2)}}</span>
        </div>
        <div class="price-item total">
          <span>应付总额：</span>
          <span class="total-price">¥{{finalAmount.toFixed(2)}}</span>
        </div>
        <div class="address-confirm">
          寄送至：{{selectedAddress.province}} {{selectedAddress.address}}
          <br>
          收货人：{{selectedAddress.name}} {{selectedAddress.phone}}
        </div>
      </div>
      <el-button type="danger" size="large" @click="submitOrder">提交订单</el-button>
    </div>

    <!-- 地址编辑对话框 -->
    <el-dialog :title="addressDialogTitle" :visible.sync="addressDialogVisible" width="500px">
      <el-form :model="addressForm" :rules="addressRules" ref="addressForm" label-width="100px">
        <el-form-item label="收货人" prop="name">
          <el-input v-model="addressForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="addressForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="province">
          <el-cascader
            v-model="addressForm.region"
            :options="regionOptions"
            @change="handleRegionChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="addressForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addressDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="确认订单信息"
      :visible.sync="confirmDialogVisible"
      width="50%"
      class="confirm-dialog"
      :before-close="handleConfirmClose">
      <div class="confirm-content">
        <div class="confirm-section">
          <h4><i class="el-icon-location"></i> 收货信息</h4>
          <div class="info-box">
            <p>收货人：{{selectedAddress.name}} {{selectedAddress.phone}}</p>
            <p>收货地址：{{selectedAddress.province}} {{selectedAddress.city}} {{selectedAddress.district}} {{selectedAddress.address}}</p>
          </div>
        </div>
        
        <div class="confirm-section">
          <h4><i class="el-icon-shopping-cart-full"></i> 商品信息</h4>
          <div class="info-box">
            <div v-for="(item, index) in orderItems" :key="index" class="confirm-item">
              <img :src="item.image" :alt="item.name" class="confirm-item-img">
              <div class="confirm-item-info">
                <div class="confirm-item-name">{{item.name}}</div>
                <div class="confirm-item-spec">{{item.spec}}</div>
                <div class="confirm-item-price">
                  <span class="price">¥{{item.price.toFixed(2)}}</span>
                  <span class="quantity">x{{item.quantity}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="confirm-section">
          <h4><i class="el-icon-money"></i> 支付信息</h4>
          <div class="info-box">
            <p>支付方式：{{selectedPayment === 'weixin' ? '微信支付' : '支付宝'}}</p>
            <p>配送方式：{{deliveryType === 'express' ? '快递运输' : '其他'}}</p>
            <p>发票类型：{{invoiceForm.type === 'electronic' ? '电子发票' : '普通发票'}}</p>
          </div>
        </div>

        <div class="confirm-section total-section">
          <div class="total-item">
            <span>商品总额：</span>
            <span class="price">¥{{totalAmount.toFixed(2)}}</span>
          </div>
          <div class="total-item">
            <span>运费：</span>
            <span class="price">¥{{shipping.toFixed(2)}}</span>
          </div>
          <div class="total-item">
            <span class="total-label">应付总额：</span>
            <span class="total-price">¥{{finalAmount.toFixed(2)}}</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleConfirmClose">返回修改</el-button>
        <el-button type="primary" @click="handleOrderSubmit" :loading="submitLoading">确认提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'UserBalance',
  data() {
    return {
      addresses: [],
      orderItems: [],
      deliveryType: 'express',
      deliveryTime: 'anytime',
      invoiceForm: {
        type: 'electronic'
      },
      addressForm: {
        name: '',
        phone: '',
        region: [],
        province: '',
        address: '',
        isDefault: false
      },
      addressRules: {
        name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        region: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      addressDialogVisible: false,
      addressDialogTitle: '新增收货地址',
      editingAddressIndex: -1,
      shipping: 0,
      regionOptions: [], // 这里需要添加省市区数据
      checkoutInfo: null,
      confirmDialogVisible: false,
      submitLoading: false,
      currentStep: 1,
      availableCoupons: [],
      selectedCoupon: null,
      paymentTimer: null,
      statusCheckTimer: null,
      qrCodeUrl: '', // 添加二维码URL存储
    }
  },
  computed: {
    totalAmount() {
      return this.orderItems.reduce((total, item) => total + item.price * item.quantity, 0)
    },
    selectedAddress() {
      return this.addresses.find(addr => addr.isDefault) || this.addresses[0] || {}
    },
    discountAmount() {
      if (!this.selectedCoupon) return 0;
      const selectedCoupon = this.availableCoupons.find(c => c.id === this.selectedCoupon);
      if (!selectedCoupon) return 0;
      
      // 如果订单金额小于优惠券最低使用金额，不能使用优惠券
      if (this.totalAmount < selectedCoupon.minAmount) {
        return 0;
      }
      
      return selectedCoupon.amount;
    },
    finalAmount() {
      const total = this.totalAmount + this.shipping - this.discountAmount;
      return total > 0 ? total : 0; // 确保最终金额不小于0
    }
  },
  created() {
    // 加载结算信息
    this.loadCheckoutInfo();
    // 加载用户地址
    this.loadUserAddresses();
    this.loadAvailableCoupons();
  },
  methods: {
    loadCheckoutInfo() {
      const checkoutInfoStr = localStorage.getItem('checkoutInfo');
      if (!checkoutInfoStr) {
        this.$message.error('未找到结算信息');
        this.$router.push('/');
      return;
    }

      try {
        this.checkoutInfo = JSON.parse(checkoutInfoStr);
        this.orderItems = this.checkoutInfo.items;
        
        // 根据来源显示不同的提示
        if (this.checkoutInfo.type === 'buyNow') {
          this.$message.success('正在处理直接购买...');
        } else {
          this.$message.success('正在处理购物车结算...');
        }
        
        console.log('加载结算信息成功:', this.checkoutInfo);
      } catch (error) {
        console.error('解析结算信息失败:', error);
        this.$message.error('加载结算信息失败');
        this.$router.push('/');
      }
    },

    loadUserAddresses() {
      this.request.get("/address/list").then(res => {
        console.log('地址列表响应:', res);
        if (res.code === 1) {
          if (res.data && Array.isArray(res.data)) {
            // 转换后端数据结构为前端所需格式
            this.addresses = res.data.map(addr => ({
              id: addr.id,
              name: addr.receiverName,
              phone: addr.receiverPhone,
              province: addr.province,
              city: addr.city,
              district: addr.district,
              address: addr.detailAddress,
              isDefault: addr.isDefault ? true : false
            }));

            if (this.addresses.length > 0) {
              // 查找默认地址
              const defaultAddress = this.addresses.find(addr => addr.isDefault);
              if (defaultAddress) {
                // 如果有默认地址，确保它被标记为选中
                this.addresses.forEach(addr => addr.isDefault = (addr.id === defaultAddress.id));
              } else {
                // 如果没有默认地址，将第一个地址标记为默认
                this.addresses[0].isDefault = true;
              }
            } else {
              this.$message.warning('暂无收货地址，请添加新的收货地址');
              this.showAddressDialog();
            }
          }
        } else {
          this.$message.error(res.msg || '获取地址列表失败');
        }
    }).catch(error => {
        console.error('加载地址失败:', error);
        this.$message.error('加载地址失败，请检查网络连接');
    });
    },

    // 显示新增地址对话框
    showAddressDialog() {
      this.addressDialogTitle = '新增收货地址'
      this.editingAddressIndex = -1
      this.addressForm = {
        name: '',
        phone: '',
        region: [],
        province: '',
        address: '',
        isDefault: false
      }
      this.addressDialogVisible = true
    },
    // 编辑地址
    editAddress(index) {
      this.addressDialogTitle = '编辑收货地址'
      this.editingAddressIndex = index
      this.addressForm = { ...this.addresses[index] }
      this.addressDialogVisible = true
    },
    // 保存地址
    saveAddress() {
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          const addressData = {
            ...this.addressForm,
            isDefault: this.addressForm.isDefault ? 1 : 0
          };

          const url = this.editingAddressIndex === -1 ? 
            '/address/add' : 
            '/address/update';

          this.request.post(url, addressData).then(res => {
            if (res.code === '200') {
              this.$message.success(this.editingAddressIndex === -1 ? '添加地址成功' : '更新地址成功');
              this.addressDialogVisible = false;
              this.loadUserAddresses(); // 重新加载地址列表
          } else {
              this.$message.error(res.msg || '保存地址失败');
          }
          }).catch(error => {
            console.error('保存地址失败:', error);
            this.$message.error('保存地址失败，请重试');
          });
        }
      });
    },
    // 删除地址
    deleteAddress(index) {
      const address = this.addresses[index];
      this.$confirm('确定要删除这个地址吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.request.post('/address/delete', { id: address.id }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除地址成功');
            this.loadUserAddresses(); // 重新加载地址列表
          } else {
            this.$message.error(res.msg || '删除地址失败');
          }
        }).catch(error => {
          console.error('删除地址失败:', error);
          this.$message.error('删除地址失败，请重试');
        });
      });
    },
    // 选择地址
    selectAddress(index) {
      const selectedAddress = this.addresses[index];
      this.request.post('/address/setDefault', { 
        id: selectedAddress.id 
      }).then(res => {
        if (res.code === '200') {
          this.addresses.forEach(addr => addr.isDefault = (addr.id === selectedAddress.id));
          this.$message.success('设置默认地址成功');
        } else {
          this.$message.error(res.msg || '设置默认地址失败');
        }
      }).catch(error => {
        console.error('设置默认地址失败:', error);
        this.$message.error('设置默认地址失败，请重试');
      });
    },
    // 提交订单
    submitOrder() {
      if (!this.selectedAddress.id) {
        this.$message.warning('请选择收货地址');
        return;
      }
      this.confirmDialogVisible = true;
      this.currentStep = 2;
    },
    handleRegionChange(value) {
      this.addressForm.province = value.join(' ')
    },
    // 处理确认框关闭
    handleConfirmClose() {
      this.$confirm('确定要返回修改订单信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.confirmDialogVisible = false;
        this.currentStep = 1;
      }).catch(() => {});
    },
    // 处理订单最终提交
    async handleOrderSubmit() {
      this.submitLoading = true;
      try {
        // 构建订单数据
        const orderData = {
          addressId: this.selectedAddress.id,
          items: this.orderItems.map(item => ({
            itemId: item.itemId,
            name: item.name,
            image: item.image,
            spec: item.spec,
            price: item.price,
            quantity: item.quantity
          })),
          totalAmount: this.totalAmount,
          freightAmount: this.shipping,
          discountAmount: this.discountAmount,
          finalAmount: this.finalAmount,
          paymentType: 1, // 支付宝支付
          deliveryType: this.deliveryType,
          deliveryTime: this.deliveryTime,
          invoice: {
            type: this.invoiceForm.type,
            title: this.invoiceForm.title,
            content: this.invoiceForm.content
          },
          orderType: this.checkoutInfo.type || 'cart',
          couponId: this.selectedCoupon
        };

        const response = await this.request.post("/orders/create", orderData);
        this.submitLoading = false;
        
        if (response.code === 1) {
          this.currentStep = 3;
          this.$message.success('订单创建成功！');
          
          // 跳转到独立的支付页面
          this.$router.push({
            path: '/payment',
            query: {
              orderNo: response.data.orderNo,
              amount: response.data.payAmount,
              subject: '达尔优61蓝牙机械键盘'
            }
          }).catch(err => {
            console.error('路由跳转失败:', err);
            this.$message.error('跳转支付页面失败，请从订单列表重新发起支付');
          });
        } else {
          this.$message.error(response.msg || '订单提交失败');
        }
      } catch (error) {
        console.error('订单提交失败:', error);
        this.submitLoading = false;
        this.$message.error('订单提交失败，请重试');
      }
    },
    async loadAvailableCoupons() {
      try {
        // 先获取用户优惠券列表
        const userCouponsRes = await this.request.get('/usercoupons/unused');
        console.log('用户优惠券数据:', userCouponsRes);
        
        // 获取优惠券详细信息
        const couponsRes = await this.request.get('/coupons/list');
        console.log('优惠券详情数据:', couponsRes);
        
        if (userCouponsRes.data && Array.isArray(userCouponsRes.data)) {
          // 将用户优惠券和优惠券详情关联
          this.availableCoupons = userCouponsRes.data.map(userCoupon => {
            // 查找对应的优惠券详情
            const couponDetail = couponsRes.data.find(c => c.couponsId === userCoupon.couponId);
            
            // 计算优惠额度
            let amount = 0;
            let minAmount = 0;
            let name = '优惠券';
            
            if (couponDetail) {
              // 根据优惠券类型计算优惠金额
              switch(couponDetail.type) {
                case 'PERCENTAGE': // 折扣券
                  amount = (100 - couponDetail.value * 100).toFixed(0);
                  name = `${couponDetail.name}`;
                  minAmount = couponDetail.minOrderAmount;
                  break;
                case 'FIXED': // 固定金额
                case 'NO_THRESHOLD': // 无门槛
                  amount = couponDetail.value;
                  name = couponDetail.name;
                  minAmount = couponDetail.minOrderAmount;
                  break;
              }
            }
            
            return {
              id: userCoupon.usercouponsid,
              couponId: userCoupon.couponId,
              amount: amount,
              name: name,
              minAmount: minAmount,
              expireTime: couponDetail ? couponDetail.validUntil.split('T')[0] : '永久有效',
              status: userCoupon.status,
              type: couponDetail ? couponDetail.type : null,
              maxDiscount: couponDetail ? couponDetail.maxDiscount : 0
            };
          });
          
          // 过滤掉无效的优惠券
          this.availableCoupons = this.availableCoupons.filter(coupon => 
            coupon.status === 0 && coupon.type
          );
        }
        
        console.log('处理后的优惠券数据:', this.availableCoupons);
      } catch (error) {
        console.error('加载优惠券失败:', error);
        this.$message.error('加载优惠券失败，请稍后重试');
      }
    },
    selectCoupon(coupon) {
      // 检查订单金额是否满足优惠券使用条件
      if (this.totalAmount < coupon.minAmount) {
        this.$message.warning(`订单金额未满${coupon.minAmount}元，无法使用该优惠券`);
        return;
      }
      
      // 如果当前选中的是同一张优惠券，则取消选择
      if (this.selectedCoupon === coupon.id) {
        this.selectedCoupon = null;
        this.$message.info('已取消使用优惠券');
      } else {
        this.selectedCoupon = coupon.id;
        
        // 根据优惠券类型显示不同的提示信息
        let message = '';
        if (coupon.type === 'PERCENTAGE') {
          message = `已选择${coupon.name}，最高优惠${coupon.maxDiscount}元`;
        } else {
          message = `已选择${coupon.amount}元优惠券`;
        }
        this.$message.success(message);
      }
    },
  }
}
</script>

<style scoped>
.checkout-container {
  background-color: #f4f4f4;
  min-height: 100vh;
  padding-bottom: 150px;
}

.progress-bar {
  background: #fff;
  padding: 15px 0;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.jd-logo {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.jd-logo img {
  height: 30px;
  margin-right: 10px;
}

.steps {
  margin: 0 auto;
  width: 60%;
}

.notice-bar {
  background: #fff8e6;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.notice-bar i {
  color: #f0a326;
  margin-right: 10px;
}

.section-card {
  background: #fff;
  padding: 20px;
  margin: 0 auto 20px;
  max-width: 1200px;
  border-radius: 4px;
}

.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.address-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.address-selected {
  border-color: #e4393c;
  background-color: #fff8f8;
}

.add-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  border-style: dashed;
}

.add-address i {
  font-size: 24px;
  margin-bottom: 8px;
}

.payment-options {
  display: none;
}

.payment-section {
  display: none;
}

.more-btn {
  color: #999;
}

.delivery-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-info {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.shop-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.item-info {
  flex: 1;
}

.no-return {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

.no-return i {
  margin-right: 5px;
}

.checkout-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 999;
  min-height: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.price-detail {
  margin-right: 20px;
  text-align: right;
}

.price-item {
  margin-bottom: 5px;
}

.amount {
  color: #e4393c;
  margin-left: 5px;
}

.total-price {
  color: #e4393c;
  font-size: 20px;
  font-weight: bold;
}

.address-confirm {
  color: #666;
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .checkout-container {
    padding-bottom: 180px;
  }

  .steps {
    width: 90%;
  }

  .address-list {
    grid-template-columns: 1fr;
  }

  .checkout-footer {
    flex-direction: column;
    padding: 10px;
  }

  .price-detail {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }
}

.confirm-dialog .confirm-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;
}

.confirm-section {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.confirm-section:last-child {
  border-bottom: none;
}

.confirm-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.confirm-section h4 i {
  margin-right: 5px;
  color: #409EFF;
}

.info-box {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
}

.info-box p {
  margin: 5px 0;
  color: #666;
}

.confirm-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.confirm-item:last-child {
  border-bottom: none;
}

.confirm-item-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
}

.confirm-item-info {
  flex: 1;
}

.confirm-item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.confirm-item-spec {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.confirm-item-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confirm-item-price .price {
  color: #e4393c;
  font-weight: bold;
}

.confirm-item-price .quantity {
  color: #999;
}

.total-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.total-item {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.total-item .price {
  color: #e4393c;
  margin-left: 10px;
  min-width: 80px;
  text-align: right;
}

.total-item .total-label {
  font-size: 16px;
  font-weight: bold;
}

.total-item .total-price {
  color: #e4393c;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  min-width: 80px;
  text-align: right;
}

.dialog-footer {
  text-align: center;
  padding-top: 20px;
}

/* 优惠券样式 */
.coupon-section {
  margin-bottom: 20px;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coupon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.coupon-item:hover {
  border-color: #409EFF;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.coupon-item.selected {
  border-color: #409EFF;
  background-color: #f0f9ff;
}

.coupon-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.coupon-amount {
  color: #f56c6c;
  text-align: center;
  margin-right: 20px;
  position: relative;
}

.coupon-amount::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: #e4e4e4;
}

.currency {
  font-size: 16px;
  position: relative;
  top: -10px;
}

.number {
  font-size: 24px;
  font-weight: bold;
}

.coupon-detail {
  flex: 1;
}

.coupon-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  font-weight: bold;
}

.coupon-condition {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.coupon-time {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.coupon-time i {
  margin-right: 4px;
}

.coupon-status {
  margin-left: 15px;
}

.no-coupon {
  text-align: center;
  color: #999;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 4px;
}

/* 修改价格显示 */
.price-detail {
  margin-right: 20px;
  text-align: right;
}

.price-item {
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.price-item span {
  margin-left: 10px;
}

.discount-amount {
  color: #f56c6c;
}

.final-amount {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

/* 支付宝支付对话框样式 */
:deep(.alipay-dialog) {
  width: 520px !important;
  border-radius: 8px;
}

:deep(.alipay-dialog .el-message-box__header) {
  padding: 15px 20px;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
}

:deep(.alipay-dialog .el-message-box__title) {
  font-size: 16px;
  color: #333;
}

:deep(.alipay-dialog .el-message-box__headerbtn) {
  top: 15px;
}

:deep(.alipay-dialog .el-message-box__content) {
  padding: 30px 20px;
}

:deep(.alipay-dialog .el-message-box__btns) {
  display: none;
}

.alipay-payment-container {
  text-align: center;
}

.qrcode-section {
  margin-bottom: 20px;
}

.qrcode-section img {
  border: 1px solid #e8e8e8;
  padding: 10px;
  border-radius: 4px;
}

.scan-tip {
  margin-top: 15px;
  color: #333;
  font-size: 14px;
}

.order-info {
  margin-bottom: 20px;
}

.order-number {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.payment-timer {
  color: #ff4d4f;
  font-size: 14px;
}

.payment-actions {
  margin-top: 20px;
}

.payment-done-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-done-btn:hover {
  background: #40a9ff;
}
</style>